<template>
  <div class="all">
    <!-- 按钮栏组件（添加、删除） skipSign:true //跳过检验-->
    <!-- {{sysCompanyCodeRoles}} -->
    <!-- {{getFindByTypeData}} -->
    <el-button type="primary" plain @click="createdAdd" size="mini" icon="el-icon-plus">新建</el-button>
    <!-- <el-button
      class="allDelete"
      type="danger"
      plain
      @click="toDelete"
      size="mini"
      icon="el-icon-delete"
    >批量删除</el-button> -->
    <!-- <div>{{addData.diaDataAdd[1]}}</div>
    <div>{{addData.diaDataAdd[index]}}</div> -->
    <!-- 弹窗 -->
    <el-dialog title="新增" :visible.sync="addData.dialogVisibleAdd" width="760px" :before-close="handleClose">
      <div class="list" v-for="(item,index) in addData.diaDataAdd" :key="index" v-if="item.addSign">
        <!-- {{addData.diaDataAdd}} -->
        <template v-if="item.addSign">
          <!-- input框 -->
          <div v-if="item.type==='input'&&item.addSign" class="lister">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              <span v-else style="color:white;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <!-- 标记：{{[item.attr]}} -->
              <!-- {{item}} -->
              <!-- <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea"
                v-if="item.EN==='notes'"
              > -->
              <el-input v-if="item.EN==='notes' || item.EN==='memo'" width='210px' type="textarea" v-model="addData.diaDataAdd[index].value" placeholder="请输入内容" clearable @blur="BurExp($event,item,index)" size="mini"></el-input>
              <el-input v-model="addData.diaDataAdd[index].value" :placeholder="item.indexConValue || '请输入内容'" clearable @blur="BurExp($event,item,index)" size="mini" v-else></el-input>
            </span>
            <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
            <!-- <span v-if="!item.result" class="font_color"></span> -->
          </div>
          <!-- 地理input框 -->
          <div v-if="item.type==='location'&&item.addSign" class="lister">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              <span v-else style="color:white;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <el-input width='210px' v-model="addData.diaDataAdd[index].value" placeholder="请输入内容" size="mini" suffix-icon="el-icon-location-outline" @focus="getGpsList()"></el-input>
            </span>
            <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
            <!-- <span v-if="!item.result" class="font_color"></span> -->
          </div>
          <!-- 计数器 -->
          <div class="lister" :key="index" v-else-if="item.type==='number'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}:
            </span>
            <span class="inb">
              <!-- 标记：{{[item.attr]}} -->
              <el-input-number v-model="addData.diaDataAdd[index].value" :min="1" label="描述文字" size="mini"></el-input-number>
            </span>
            <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
          </div>
          <!-- 时间选择 -->
          <div class="lister" :key="index" v-else-if="item.type=='date'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='date'&&item.addSign">
              <el-date-picker size="mini" v-model="addData.diaDataAdd[index].value" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime"></el-date-picker>
            </span>
          </div>
          <!-- 年月日 -->
          <div class="lister" :key="index" v-else-if="item.type=='datetime'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='datetime'&&item.addSign">
              <el-date-picker size="mini" v-model="addData.diaDataAdd[index].value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="getSTime"></el-date-picker>
            </span>
          </div>
          <!-- 下拉框 -->
          <div class="lister" :key="index" v-else-if="item.type=='select'&&item.addSign">

            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <!-- 字典 -->
            <!-- <dictionaries :searchData='diaDataAdd' :modelType='modelType' @optionData="dictionariesCallBack" @optionDataTable="dictionariesTableCallBack"></dictionaries> -->
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}:
            </span>
            <span v-if="item.EN ==='superior'" class="inb">
              <el-cascader v-model="addData.diaDataAdd[index].value" :options="selectOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
            </span>
            <span v-else class="inb">
              <el-cascader v-if="item.EN === 'organization'" v-model="addData.diaDataAdd[index].value" :show-all-levels="false" :options="superiorListOption" :props="{ checkStrictly: true }" clearable></el-cascader>
              <!-- 字典项 typeGroupCode-->
              <el-select v-if="item.typeGroupCode" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                <el-option v-for="i in searchOption[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
              </el-select>
              <!-- 租户管理员页面  --租户框 -->

              <el-select v-else-if="item.EN == 'sysCompanyCode'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" @change="sysCompanyCodeChange(addData.diaDataAdd[index].value)" clearable>
                <el-option v-for="i in getFindByTypeData" :key="i.value" :label="i.name" :value="i.sysCompanyCode"></el-option>
              </el-select>
              <!-- 租户管理员页面  --角色框 -->
              <el-select v-else-if="item.EN == 'groupId'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" @change="sysRoleChange" clearable>
                <!-- 一个租户只对应一个角色 -->
                <!-- <el-option :label="roleObj.name" :value="roleObj.id"></el-option> -->
                <!-- {{roleArr}} -->
                <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
              </el-select>
              <!-- 字典项 dictTable-->
              <el-select v-else-if="item.dictTable" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>

            </span>
          </div>
          <!-- 多选框 -->
          <div class="Checkbox" :key="index" v-else-if="item.type=='Checkbox'&&item.addSign">
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}
            </span>
            <span class="inb" v-if="item.type=='Checkbox'&&item.addSign">
              <el-checkbox v-model="addData.diaDataAdd[index].value"></el-checkbox>
            </span>
          </div>
          <!-- 开关 -->
          <div class="Switch" :key="index" v-else-if="item.type=='switch'&&item.addSign">
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}
            </span>
            <span class="inb" v-if="item.type=='switch'&&item.addSign">
              <el-switch v-model="addData.diaDataAdd[index].value" :active-value='1' :inactive-value='0' active-text="是" inactive-text="否" @change='changeStatus'>
              </el-switch>
            </span>
          </div>
          <!-- 文件 -->
          <div class="fileUpload" :key="index" v-else-if="item.type=='file'&&item.addSign">
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}
            </span>
            <span class="inb" v-if="item.type=='file'&&item.addSign">
              <el-upload v-model="addData.diaDataAdd[index].value" action="" accept=".doc,.docx,.pdf,.txt" :limit='1' :auto-upload="false" :on-change="handleFileChange">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一个文件</div>
              </el-upload>
            </span>
          </div>
          <!-- 图片上传 -->
          <div class="imageUpload" :key="index" v-else-if="item.type=='image'&&item.addSign" style="margin-left:37px;">
            <span class="fon">
              <!-- <span v-if="!item['skipSign']" style="color:red;">*</span> -->
              {{item.CN}}
            </span>
            <span class="inb" v-if="item.type=='image'&&item.addSign">
              <el-upload v-model="addData.diaDataAdd[index].value" action="" list-type="picture-card" :auto-upload="false" :limit='1' :on-change="handleImageChange" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </span>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAdd" size="mini">确 定</el-button>
        <el-button @click="addData.dialogVisibleAdd = false" size="mini">取 消</el-button>
      </span>
      <!-- 点击新增设备定位按钮弹框 -->
      <el-dialog title="地图定位" :visible.sync="mapequipmentDialog" width="930px">
        <!-- <div class="selectAddress">
          <p class="deviceAddressText">{{dizhiMap}}</p>
        </div> -->
        <div id="container"></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="mapequipmentDialog = false">取 消</el-button>
          <el-button type="primary" @click="getClick">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSelectByCodeAndType, //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from '@/api/TenantAdministratorManagement'
import AMap from "vue-amap";
// 字典
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  data () {
    return {
      direction: 'rtl',
      //开关选择
      switchValue: 0,
      // 地图弹框
      mapequipmentDialog: false,
      // 地图弹框的数据源
      dizhiMap: '',
      //图片选择
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      number: 1,
      disabledBathch: false,
      //文件
      annexPath: "",
      imgFiles: "",
      // 租户管理员  租户-角色数据
      sysCompanyCodeRolesData: this.$parent.sysCompanyCodeRoles,
      //添加数据模型
      addData: {
        //弹窗控制
        dialogVisibleAdd: false,
        //数据字典
        diaDataAddDictionaries: [],
        //添加弹窗的数据模型
        diaDataAdd: [],
        //确定的disabled，
        mainDisabled: true,
        eventualData: undefined,
      },
      // selectData:[]
      selectOptions: [
        {
          id: 1,
          name: '微山自来水',
          children: [
            {
              id: 2,
              name: '幸福苑小区',
              children: [{ id: 3, name: '1号楼' }],
            },
          ],
        },
        {
          id: 4,
          name: '泗水县',
          children: [
            {
              id: 5,
              name: '花园小区',
              children: [
                { id: 6, name: '1号楼' },
                { id: 7, name: '2号咯' },
                { id: 8, name: '2号咯' },
                { id: 9, name: '2号咯' },
              ],
            },
            {
              id: 10,
              name: '荣盛小区',
            },
          ],
        },
      ],
      superiorData: '',
      // 组件类型
      modelType: 'search',
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      checked: false,
      // 备注  文本域
      textarea: '',
      // 返回的角色对象
      roleArr: [],
    }
  },
  computed: {
  },
  props: [
    //添加传过来的值
    'diaDataAdd',
    'optionsZi',
    'searchOptionTable',
    'getFindByTypeData',
    'sysCompanyCodeRoles',
    'multipleSelection',
    'superiorListOption',
  ],
  mounted () {
    this.addData.diaDataAdd = JSON.parse(JSON.stringify(this.diaDataAdd))
    // console.log(this.addData.diaDataAdd, "33333333333333")
    // this.getGpsList()
  },
  methods: {
    // getGpsList () {
    //   debugger;
    //   this.mapequipmentDialog = true
    //   var map = new AMap.Map("container", {
    //     viewMode: "3D",
    //     pitch: 50,
    //     zoom: 20,
    //     center: [106.634511, 29.71840],
    //     resizeEnable: true,
    //   });
    //   // this.$nextTick(function () {
    //   //   // 创建变量，用于存储地址
    //   //   var address
    //   //   var dizhi
    //   //   var marker
    //   //   if (marker === undefined) {
    //   //     //  初始化百度地图
    //   //     debugger;
    //   //     var map = new BMapGL.Map('container')
    //   //     // 创建地图实例
    //   //     var point = new BMapGL.Point(116.404, 39.915)
    //   //     // 创建点坐标
    //   //     map.centerAndZoom(point, 15)
    //   //     // var marker = new BMap.Marker(point);
    //   //     // map.addOverlay(marker);
    //   //     map.enableScrollWheelZoom(true)
    //   //     that.dizhiMap = map
    //   //     map.addEventListener('click', function (e) {
    //   //       // console.log(e);
    //   //       debugger;
    //   //       // 移除标注
    //   //       map.removeOverlay(marker)

    //   //       // 创建变量，用于存储经纬度
    //   //       var point = e.point
    //   //       // console.log(point)

    //   //       // 设置lng的值
    //   //       window.localStorage.setItem('lng', point.lng)

    //   //       // 设置lat的值
    //   //       window.localStorage.setItem('lat', point.lat)

    //   //       // 创建标注实例
    //   //       marker = new BMap.Marker(point)

    //   //       // 添加标注
    //   //       map.addOverlay(marker)

    //   //       // 创建地理编码实例
    //   //       var geoc = new BMap.Geocoder()
    //   //       debugger;
    //   //       geoc.getLocation(point, function (rs) {
    //   //         if (rs) {

    //   //         }
    //   //         console.log(rs)
    //   //         debugger;
    //   //         dizhi = rs.address

    //   //         address = rs.addressComponents
    //   //         // console.log(address)

    //   //         // 设置currentProvince的值
    //   //         window.localStorage.setItem('currentProvince', address.province)

    //   //         // 设置currentCity的值
    //   //         window.localStorage.setItem('currentCity', address.city)
    //   //         // 设置地址的值
    //   //         window.localStorage.setItem('dizhi', dizhi)
    //   //         // that.dizhiMap = window.localStorage.getItem('dizhi')
    //   //       })
    //   //     })
    //   //   }
    //   // })
    // },
    //切换开关调用的函数
    changeStatus (callback) {
      this.switchValue = callback
    },
    //添加文件调用的函数
    handleFileChange (file) {
      // console.log(file, 5555555)
      this.annexPath = file.raw;
      let data = this.addData.diaDataAdd.filter(function (item) {
        return item.EN == "annexPath";
      })
      data[0].value = file.name
      let fileData = data[0]
      this.addData.diaDataAdd = this.addData.diaDataAdd.map((item) => {
        if (item.EN == "annexPath") {
          item = fileData
        }
        return item;
      })
      console.log(this.addData.diaDataAdd, "66666666")
    },
    //添加图片调用函数
    handleImageChange (file) {
      this.imgFiles = file.raw;
      let data = this.addData.diaDataAdd.filter(function (item) {
        return item.EN == "imagesPath";
      })
      data[0].value = file.name
      let imageData = data[0]
      this.addData.diaDataAdd = this.addData.diaDataAdd.map((item) => {
        if (item.EN == "imagesPath") {
          item = imageData
        }
        return item;
      })
      console.log(this.addData.diaDataAdd, "777777")
    },
    handleRemove (file) {
      // ⭐ 获取到该组件调用handleRemove方法删除file对象
      this.$refs.pictureUpload.handleRemove(file)
    },
    // 角色
    sysRoleChange (newvalue) {
      console.log(8888888888888)

      // this.$emit('sysRoleChangeData',newvalue)
      const roleArrs = this.roleArr
      console.log(999999999999)

      var id = ''
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index]
        id = roleArrs[index].id
      }
      this.$emit('sysRoleId', id)
      console.log(id)
    },
    // getFindByTypeData(){
    //   this.getFindByType()
    // },
    //
    // 租户管理员页面  如果改变触发
    async sysCompanyCodeChange (value) {
      console.log(value, 'duime')
      // console.log(this.$parent.getSelectByCodeAndTypeData(value));
      const res = await getSelectByCodeAndType(value)
      console.log(
        res,
        '子组件用于添加租户管理员时选择租户后之间传回选择租户的角色'
      )
      const roleObjs = res.data
      if (roleObjs) {
        console.log(roleObjs)

        this.roleArr = roleObjs
        // console.log([roleObjs],999999999);
        // console.log(this.roleArr,8888888888888);
      } else {
        console.log('该租户没有对应的角色')
      }

      // console.log(22222222222222222);

      // this.$parent.getSelectByCodeAndTypeData(value)
      // console.log(sysCompanyCodeRoles);

      // console.log(this.sysCompanyCodeRolesData,'99999',res,'sssssss');
    },
    //   获取父级select的数据
    // getSelectData(){
    //     console.log(this.$parent,'ceshikk');

    // },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.addData.dialogVisibleAdd = false
          done()
        })
        .catch((_) => { })
    },
    // handleCloses(done) {
    //   this.$confirm("确认关闭？")
    //     .then(_ => {
    //       this.addData.dialogVisibleAdd = false;
    //       done();
    //     })
    //     .catch(_ => {});
    // },
    //搜索框内容传递给父元素
    createdAdd () {
      this.addData.dialogVisibleAdd = true
      //清空value;
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        this.addData.diaDataAdd[i].value = ''
        this.addData.diaDataAdd[i].result = true
      }
    },
    //添加-传给父组件，ajax
    toAdd () {
      this.$emit('toAdd', this.addData.diaDataAdd, this.imgFiles)
      this.addData.dialogVisibleAdd = false
      // let bur = true
      // let attrArr = []
      // for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
      //   let at = this.addData.diaDataAdd[i]
      //   if (at.addSign && !at['skipSign']) {
      //     if (at.result === false || at.value === '') {
      //       console.log(at.value, 22)
      //       bur = false
      //       break
      //     }
      //   } else {
      //     if (at.result === false) {
      //       bur = false
      //       break
      //     }
      //   }
      // }
      // console.log(bur, 8881111)
      // console.log(bur)

      // if (bur === true) {
      //   console.log("2222222222222222222222222", this.addData.diaDataAdd)
      //   this.$emit('toAdd', this.addData.diaDataAdd, this.imgFiles)
      //   this.addData.dialogVisibleAdd = false
      // } else {
      //   this.$message({
      //     message: '请添加全部参数，并符合标准！',
      //     type: 'warning',
      //   })
      // }
    },

    //删除-传给父组件，ajax
    toDelete () {
      this.$emit('toDelete', '点击了删除')
    },

    getSTime (val) {
      this.addData.diaDataAdd.createTime = val
      // console.log(val)
    },
    //正则表达式
    BurExp (e, item, index) {
      if (this.addData.diaDataAdd[index].skipSign && e.target.value === '') {
        item.result = true
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value)
        item.result = boolean
        this.addData.diaDataAdd[index].result = boolean
        console.log(item.result, 999)
      }
      // console.log(item, index);
      // console.log( this.addData.diaDataAdd,this.TableDataModel)

      // ----
      // let boolean = new RegExp(item.Exp).test(e.target.value);
      // this.addData.diaDataAdd[index].result = boolean;
      // ----
      // this.TableDataModel[index].result= boolean;
      // let newAobj=this.TableDataModel[index]
      // console.log(boolean);
      // console.log(this.TableDataModel[index]);
    },
    // 新增   租户特殊请求
    getSelectByCodeAndTypeDatas () {
      console.log(this.$parent.getSelectByCodeAndTypeData, 'zhegeshishsi')
    },
    // 图片放大
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  created () {
    // this.getSelectData()
    this.getSelectByCodeAndTypeDatas()
  },
  watch: {
    optionsZi (newVal) {
      this.searchOption = newVal
    },
    searchOptionTable (newVal) {
      this.searchOptions = newVal
    },
    multipleSelection (newVal) {
      console.log(newVal, 3589)
      if ((newVal, length == 0)) {
        this.disabledBathch = false
      } else {
        this.disabledBathch = true
      }
      console.log(newVal, this.disabledBathch, 3589)
    },
  },
}
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 500px;
}
.all {
  .is-plain {
    // width: 84px;
    // height: 34px;
    // /deep/.el-icon-plus{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  .allDelete {
    // width: 110px;
    // /deep/.el-icon-delete{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  display: inline-block;
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    .lister {
      height: 44px;
      width: 370px;
      .fon {
        text-align: right;
        margin-right: 14px;
        width: 99px;
      }
      .inb {
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
    .font_color {
      font-size: 12px;
      padding-left: 100px;
      padding-top: 10px;
    }
  }
}
</style>
